<script setup>
import songCard from '@/components/songCard.vue'
import { reactive, getCurrentInstance,ref } from 'vue';
import tools from "../tools/tools.js"
const loading = ref(true)
const bus = tools.Bus()
const { proxy } = getCurrentInstance()
const tagMsg = reactive({})
const t =setTimeout(()=>{loading.value=false;clearTimeout(t)},2000)
proxy.$https.hqlistTag().then(res => {
    tagMsg.tag = [...res.data.tags]
})
const name = ref('全部')

function send(params) {
 name.value = params
}




</script>

<template>
     <div v-show="!loading">
        <h2>
            歌单列表
        </h2>
        <ul>
            <li v-for="(item) in tagMsg.tag">
                <el-button type="success" text bg @click="send(item.name)">{{item.name}}</el-button>
            </li>
        </ul>
        <songCard :nameMsg="name"></songCard>
     </div>
    <p id="p" v-show="loading">加载中...</p>
</template>

<style scoped>
li {
    list-style-type: none;
    margin: 10px;
}

ul {
    display: flex;
    flex-wrap: wrap;
}
#p{
color:pink;
font-size: 50px;
width: 100%;
display: flex;
justify-content: center;
}
</style>